<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 overflow-x-hidden">
    <!-- 侧边栏 -->
    <aside
      :class="[
        'fixed top-0 left-0 z-40 h-screen transition-transform',
        sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
        'w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700'
      ]"
    >
      <!-- Logo -->
      <div class="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-700">
        <NuxtLink to="/admin" class="flex items-center gap-2">
          <div class="w-8 h-8 bg-gradient-to-br from-primary-600 to-purple-600 rounded-lg flex items-center justify-center">
            <Icon name="heroicons:code-bracket" class="w-5 h-5 text-white" />
          </div>
          <span class="font-bold text-lg text-gray-900 dark:text-white">管理后台</span>
        </NuxtLink>
      </div>

      <!-- 导航菜单 -->
      <nav class="flex-1 overflow-y-auto p-4 space-y-1">
        <NuxtLink
          v-for="item in menuItems"
          :key="item.path"
          :to="item.path"
          class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors group"
          active-class="bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400"
        >
          <Icon :name="item.icon" class="w-5 h-5" />
          <span class="font-medium">{{ item.label }}</span>
          <span
            v-if="item.badge"
            class="ml-auto text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
          >
            {{ item.badge }}
          </span>
        </NuxtLink>
      </nav>

      <!-- 用户信息 -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <div class="flex items-center gap-3 px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
          <UserAvatar 
            :avatar="authStore.user?.avatar" 
            :nickname="authStore.user?.nickname"
            size="md"
            class="flex-shrink-0"
          />
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
              {{ authStore.user?.nickname || '管理员' }}
            </p>
            <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
              {{ authStore.user?.email }}
            </p>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <div class="lg:pl-64 max-w-full overflow-x-hidden">
      <!-- 顶部导航栏 -->
      <header class="sticky top-0 z-30 h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <div class="h-full px-4 flex items-center justify-between">
          <!-- 移动端菜单按钮 -->
          <button
            @click="sidebarOpen = !sidebarOpen"
            class="lg:hidden p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
          >
            <Icon name="heroicons:bars-3" class="w-6 h-6" />
          </button>

          <!-- 面包屑 -->
          <nav class="hidden md:flex items-center gap-2 text-sm">
            <NuxtLink to="/admin" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
              管理后台
            </NuxtLink>
            <Icon name="heroicons:chevron-right" class="w-4 h-4 text-gray-400" />
            <span class="text-gray-900 dark:text-white font-medium">{{ currentPageTitle }}</span>
          </nav>

          <!-- 右侧操作 -->
          <div class="flex items-center gap-3">
            <!-- 通知 -->
            <button class="relative p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700">
              <Icon name="heroicons:bell" class="w-6 h-6" />
              <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
            </button>

            <!-- 返回前台 -->
            <NuxtLink
              to="/"
              class="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
            >
              <Icon name="heroicons:arrow-left" class="w-4 h-4" />
              <span class="text-sm font-medium">返回前台</span>
            </NuxtLink>

            <!-- 退出登录 -->
            <button
              @click="handleLogout"
              class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
              title="退出登录"
            >
              <Icon name="heroicons:arrow-right-on-rectangle" class="w-6 h-6" />
            </button>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="p-6">
        <slot />
      </main>
    </div>

    <!-- 移动端遮罩 -->
    <div
      v-if="sidebarOpen"
      @click="sidebarOpen = false"
      class="fixed inset-0 z-30 bg-black/50 lg:hidden"
    ></div>
  </div>
</template>

<script setup lang="ts">
const authStore = useAuthStore()
const router = useRouter()
const route = useRoute()

// 侧边栏状态
const sidebarOpen = ref(false)

// 菜单项
const menuItems = [
  {
    path: '/admin',
    label: '数据总览',
    icon: 'heroicons:chart-bar-square',
  },
  {
    path: '/admin/tools',
    label: '工具管理',
    icon: 'heroicons:cube',
  },
  {
    path: '/admin/categories',
    label: '分类管理',
    icon: 'heroicons:folder-open',
  },
  {
    path: '/admin/users',
    label: '用户管理',
    icon: 'heroicons:users',
  },
  {
    path: '/admin/articles',
    label: '文章管理',
    icon: 'heroicons:document-text',
  },
  {
    path: '/admin/reviews',
    label: '评论审核',
    icon: 'heroicons:chat-bubble-left-right',
    badge: '3',
  },
  {
    path: '/admin/orders',
    label: '订单管理',
    icon: 'heroicons:shopping-cart',
  },
  {
    path: '/admin/pricing',
    label: '套餐管理',
    icon: 'heroicons:currency-dollar',
  },
]

// 当前页面标题
const currentPageTitle = computed(() => {
  const item = menuItems.find(m => m.path === route.path)
  return item?.label || '管理后台'
})

// 退出登录
const handleLogout = async () => {
  if (confirm('确定要退出登录吗？')) {
    authStore.logout()
    router.push('/login')
  }
}

// 监听路由变化，关闭移动端侧边栏
watch(() => route.path, () => {
  sidebarOpen.value = false
})
</script>



